
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        #box{
            width:100px;
            height:100px;
            background: red;
        }
    </style>
</head>
<body>
<!--
    需求： 通过按钮1给div添加事件

    需求： 通过按钮2移除div上的事件

-->


<div id="box"></div>

<button id="btn1">btn1</button>
<button id="btn2">btn2</button>

<script src="打印表格(函数).js" type="text/javascript"></script>
<script type="text/javascript">


    function xxx(){
        alert(1);
    }


    //需求： 通过按钮1给div添加事件

    var btn1 = document.getElementById("btn1");
    btn1.onclick = function(){
        //获取box对象
        var box = document.getElementById("box");
        //通过事件监听方式添加事件
        addEvent(box,"click",xxx);
    }

    //需求： 通过按钮2移除div上的事件
    var btn2 = document.getElementById("btn2");
    btn2.onclick = function(){
        //获取box对象
        var box = document.getElementById("box");
        //通过事件监听方式移除事件
        removeEvent(box,"click",xxx);
    }




    /*
        //总结： 添加事件和移除事件中的处理函数的引用地址不同，所以移除的不是同一个事件处理函数


        //需求： 通过按钮1给div添加事件

            var btn1 = document.getElementById("btn1");
            btn1.onclick = function(){
                //获取box对象
                var box = document.getElementById("box");
                //通过事件监听方式添加事件
                addEvent(box,"click",function(){
                    alert(1);
                });
            }

        //需求： 通过按钮2移除div上的事件
            var btn2 = document.getElementById("btn2");
                btn2.onclick = function(){
                    //获取box对象
                    var box = document.getElementById("box");
                    //通过事件监听方式移除事件
                        removeEvent(box,"click",function(){
                            alert(1);
                        });
                }

    */


</script>



</body>
</html>
